import React, { useEffect, useState } from "react";
import { Space } from "antd";
import { CheckCard } from '@ant-design/pro-components';
import { CmdbHeader } from "@/components";
import { SelectOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons';
import "./index.less"

const GroupCard = ({ history, type, cardData, title, showEdit, showDelete, showToolip, setCheckedGroup, setDeleteGroup, setEditGroup, cardClick, outlinedClick, deleteOutlinedClick }) => {

    const outlineClickHandler = (event, value) => {
        event.stopPropagation();
        if (setCheckedGroup) setCheckedGroup(value);
        outlinedClick(value)
    }

    const deleteOutlinedClickHandler = (event, value) => {
        event.stopPropagation();
        if (setCheckedGroup) setCheckedGroup(value);
        deleteOutlinedClick(value)
    }

    return (
        <div className="group-card">
            {
                cardData ?
                <>
                    {
                        title ? 
                        <CmdbHeader
                            style={{ display: "inline-block" }}
                            titleList={[title]}
                            showEdit={showEdit}
                            showDelete={showDelete}
                            showToolip={showToolip}
                            OnDeleteClick={() => {
                                setDeleteGroup(true);
                                setCheckedGroup(cardData);
                            }}
                            OnEditClick={() => {
                                setEditGroup(true);
                                setCheckedGroup(cardData);
                            }}
                        /> : ""
                    }
                    <CheckCard.Group size="small" style={{ padding: "5px" }}>
                        {
                            type == "group" ?
                            <>
                                {cardData.definitions ? cardData.definitions.map((item, index) => {
                                    return (
                                        <CheckCard
                                            key={item.cmModuleId}
                                            title={item.moduleName}
                                            className={item.moduleDefinitionType}
                                            description={item.moduleCode}
                                            avatar={<span className={`iconfont ${item.moduleIcon}`}></span>}
                                            onClick={() => {cardClick(item, cardData)}}
                                            extra={
                                                <div className="checkcard-link">
                                                    {item.count}
                                                    <span className="checkcard-link-icon">
                                                        <SelectOutlined rotate="90" onClick={(e) => outlineClickHandler(e, item)} />
                                                    </span>
                                                </div>
                                            }
                                        />
                                    )
                                }) : ""}
                            </> :
                            <>
                                {cardData.map((item, index) => {
                                    return (
                                        <CheckCard
                                            key={item.propertyKey}
                                            title={item.propertyName}
                                            className={item.woIsSystem == 1 ? `property inner` : `property`}
                                            description={item.propertyKey}
                                            avatar={<span className={`iconfont icon-${item.moduleIcon}`}></span>}
                                            onClick={() => cardClick(item)}
                                            extra={
                                                <div className="checkcard-link">
                                                    <span className="checkcard-link-icon">
                                                            <EditOutlined onClick={(e) => outlineClickHandler(e, item)} />
                                                    </span>
                                                    {
                                                        item.woIsSystem == 1 ? null :
                                                        <span className="checkcard-link-icon">
                                                            <DeleteOutlined onClick={(e) => deleteOutlinedClickHandler(e, item)} />
                                                        </span>
                                                    }
                                                </div>
                                            }
                                        />
                                    )
                                })}
                            </>
                        }

                    </CheckCard.Group>
                </> : null
            }
        </div>
    );
}
export default GroupCard;
